// 函数组件
import React, { useState, useEffect, useContext } from 'react';
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';
import ReactECharts from 'echarts-for-react';
import type { ColumnsType } from 'antd/es/table';
import * as echarts from 'echarts';
// import "./js/CustomCharts.tsx"
import { Button, Table, Switch } from 'antd';
import "./css/ShopStatistics.less"
import { DatePicker, Space, Badge, Descriptions } from 'antd';
import { goodsStatistics, goodsStatisticsl } from '../../../api/statistics';
const { RangePicker } = DatePicker;
interface DataType {
    key: React.Key;
    shopNum: string;
    Commodity: string;
    shopNumProportion: string;
    payMoney: string;
    payMoneyProportion: string;
}
interface DataList {
    categoryName: string;
    price: string;
    priceRate: string;
    rate: string;
    sale: string;
}
interface SalesList {
    goodsName: string;
    look: string;
    lookPeople: string;
    payPeople: string;
    price: string;
    rate: string;
    saleNum: string;
}
interface rateList {
    value: number;
    name: string
}
interface oDataType {
    key: React.Key;
    shopName: string;
    pageViews: string;
    pagePeople: string;
    payPeople: string;
    conversion: string;
    payNum: string;
    payMoney: string;
}
interface GoodsStatistics {
    pageNum: number,
    pageSize: number,
    time: string,
}
interface goodsData {
    time: string,
}
function ShopStatistics() {
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    const [loading, setLoading] = useState<boolean>(false);
    const [pageNum, setPageNum] = useState<number>(1)   //第几页
    const [pageSize, setPageSize] = useState<number>(5)   //每页条数
    const [nowTime, setNowTime] = useState<number>(1) //数据当前显示界面
    const [nowTimeTwo, setNowTimeTwo] = useState<number>(1) //商品当前显示界面
    const [allShop, setAllShop] = useState<number>(1) //总条数
    const [dataList, setDataList] = useState<DataList[]>([]) //数据列表
    const [salesList, setSalesList] = useState<SalesList[]>([]) //商品列表
    const [categoryNameList, setCategoryNameList] = useState<string[]>([]) //分类列表
    const [rateList, setRateList] = useState<rateList[]>([]) //百分比列表
    const [dayTime, setDayTime] = useState<string>('yesterday') //下部日期选择
    const [dayTimeTwo, setDayTimeTwo] = useState<string>('yesterday') //下部日期选择
    useEffect(() => {
        // goodsStatistics({ pageNum: pageNum, pageSize: pageSize, time: dayTime }).then(res => {
        //     console.log('所有信息', res);
        //     setAllShop(res.data.size)
        //     setDataList(res.data.category)
        //     setSalesList(res.data.sales)
        //     let arr = res.data.category.map(function(item:DataList){
        //         return item.categoryName
        //     })
        //     console.log(arr);
        //     let arr1 = res.data.category.map(function(item:DataList){
        //         return {
        //             value:Number(item.rate.replace('%','')),
        //             name:item.categoryName
        //         }
        //     })
        //     console.log(arr1);
        //     setCategoryNameList(arr1)
        //     setRateList(arr1)

        // }).catch(err => {
        //     console.log('所有信息', err);
        // })
        showData({ time: dayTimeTwo })
        showStatistics({ pageNum: pageNum, pageSize: pageSize, time: dayTime })
    }, [])
    //上部内容
    const showData = (value: goodsData) => {
        console.log(pageNum, pageSize);
        goodsStatisticsl(value).then(res => {
            console.log('所有信息', res);
            // setAllShop(res.data.size)
            setDataList(res.data)
            // setSalesList(res.data.sales)
            let arr = res.data.map(function (item: DataList) {
                return item.categoryName
            })
            console.log(arr);
            let arr1 = res.data.map(function (item: DataList) {
                return {
                    value: Number(item.rate.replace('%', '')),
                    name: item.categoryName
                }
            })
            console.log(arr1);
            setCategoryNameList(arr)
            setRateList(arr1)

        }).catch(err => {
            console.log('所有信息', err);
        })
    }
    //下部列表
    const showStatistics = (value: GoodsStatistics) => {
        console.log(pageNum, pageSize);
        goodsStatistics(value).then(res => {
            console.log('所有信息', res);
            setAllShop(res.data.size)
            setSalesList(res.data.sales)
        }).catch(err => {
            console.log('所有信息', err);
        })
    }
    //上部改变时间
    const changeTime = (e: number) => {
        setNowTime(e)
        if (e == 1) {
            setDayTime('yesterday')

        }
        if (e == 2) {
            setDayTime('late7')

        }
        if (e == 3) {
            setDayTime('late30')

        }
        goodsStatisticsl({ time: dayTimeTwo }).then(res => {
            console.log('所有信息', res);
            // setAllShop(res.data.size)
            setDataList(res.data)
            // setSalesList(res.data.sales)
            let arr = res.data.map(function (item: DataList) {
                return item.categoryName
            })
            console.log(arr);
            let arr1 = res.data.map(function (item: DataList) {
                return {
                    value: Number(item.rate.replace('%', '')),
                    name: item.categoryName
                }
            })
            console.log(arr1);
            setCategoryNameList(arr)
            setRateList(arr1)

        }).catch(err => {
            console.log('所有信息', err);
        })
    }
    //下部改变时间
    const changeTimeTwo = (e: number) => {
        setNowTimeTwo(e)
        if (e == 1) {
            setDayTime('yesterday')

        }
        if (e == 2) {
            setDayTime('late7')

        }
        if (e == 3) {
            setDayTime('late30')

        }
        goodsStatistics({ pageNum: pageNum, pageSize: pageSize, time: dayTime }).then(res => {
            console.log('所有信息', res);
            setAllShop(res.data.size)
            setSalesList(res.data.sales)
        }).catch(err => {
            console.log('所有信息', err);
        })
    }
    const getOption = () => {
        let option = {
            title: {  //配置标题组件
                text: '一级分类商品',  //设置主标题
                // subtext: 'WHO统计调查报告',  //设置次标题
                left: 'center',  //设置主次标题都左右居中
                textStyle: {
                    fontSize: 25
                },
            },
            tooltip: {  //配置提示框组件
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {  //配置图例组件
                orient: 'vertical',  //设置垂直排列
                left: 285,  //设置图例左边距
                top: 82,  //设置图例顶边距
                data: categoryNameList
            },

            calculable: true,
            series: [  //配置数据系列组件
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['45%', '75%'], //设置半径
                    //radius: ['45%', '75%'],
                    center: ['58%', '55%'],  //设置圆心
                    clockWise: true,
                    data: rateList
                }
            ]
        };
        return option
    }
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    const columns: ColumnsType<DataType> = [
        {
            title: '商品分类',
            dataIndex: 'Commodity',
            width: '20%',
            align: 'center'
        },
        {
            title: '销量（件）',
            dataIndex: 'shopNum',
            width: '20%',
            align: 'center'
        },
        {
            title: '占比',
            dataIndex: 'shopNumProportion',
            width: '20%',
            align: 'center'
        },
        {
            title: '销售额（元）',
            dataIndex: 'payMoney',
            width: '20%',
            align: 'center'
        },
        {
            title: '占比',
            dataIndex: 'payMoneyProportion',
            width: '20%',
            align: 'center'
        },
    ];
    const oColumns: ColumnsType<oDataType> = [
        {
            title: '商品名称',
            dataIndex: 'shopName',
            width: '20%',
            align: 'center'
        },
        {
            title: '浏览量',
            dataIndex: 'pageViews',
            width: '20%',
            align: 'center'
        },
        {
            title: '浏览人数',
            dataIndex: 'pagePeople',
            width: '20%',
            align: 'center'
        },
        {
            title: '付款人数',
            dataIndex: 'payPeople',
            width: '20%',
            align: 'center'
        },
        {
            title: '单品转化率',
            dataIndex: 'conversion',
            width: '20%',
            align: 'center'
        },
        {
            title: '销售数量',
            dataIndex: 'payNum',
            width: '20%',
            align: 'center'
        },
        {
            title: '销售金额',
            dataIndex: 'payMoney',
            width: '20%',
            align: 'center'
        },
    ];
    const data: DataType[] = [];
    const oData: oDataType[] = [];
    for (let i = 0; i < dataList.length; i++) {
        data.push({
            key: i,
            Commodity: dataList[i].categoryName,
            shopNum: dataList[i].sale,
            shopNumProportion: dataList[i].rate,
            payMoney: dataList[i].price,
            payMoneyProportion: dataList[i].priceRate,

        });
    }
    for (let i = 0; i < salesList.length; i++) {
        oData.push({
            key: i,
            shopName: salesList[i].goodsName,
            pageViews: salesList[i].look,
            pagePeople: salesList[i].lookPeople,
            payPeople: salesList[i].payPeople,
            conversion: salesList[i].price,
            payNum: salesList[i].rate,
            payMoney: salesList[i].saleNum,
        });
    }

    //页码改变
    const onchangePage = (page: any) => {
        console.log('页码改变了', page);
        console.log(pageSize);
        // setPageNum(page.current)
        // setPageSize(page.pageSize)
        // setSalesList([])


        showStatistics({ pageNum: page.current, pageSize: page.pageSize, time: dayTime })
    }
    return (
        <div className='ShopStatistics'>
            {/* 头部 */}
            <div className='page-top'>
                {/* 左边标题 */}
                <div className='page-title'>
                    <p>
                        商品类目销售分析</p>
                </div>
            </div>
            {/* 内容区 */}
            <div className='page-context'>
                {/* 数据表部分 */}
                <div className='data-list'>
                    {/* 上部文字 */}
                    <div className='list-text'>
                        <p>数据列表</p>
                        <div>
                            <button className={nowTime == 1 ? 'blue' : ''} onClick={() => changeTime(1)}>昨天</button>
                            <button className={nowTime == 2 ? 'blue' : ''} onClick={() => changeTime(2)}>最近7天</button>
                            <button className={nowTime == 3 ? 'blue' : ''} onClick={() => changeTime(3)}>最近30天</button>
                            <Space direction="vertical" size={12}>
                                <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
                            </Space>
                        </div>
                    </div>
                    {/* 表格数据 */}
                    <div className='Echarts'>
                        <ReactECharts option={getOption()} style={{ height: '350px' }} />
                    </div>
                    <div className='table-from'>
                        <ConfigProvider locale={zh_CN}>
                            <Table
                                // rowSelection={rowSelection}
                                columns={columns}
                                dataSource={data}
                                pagination={false}
                                bordered
                            />
                        </ConfigProvider>
                    </div>
                </div>
                {/* 数据表部分 */}
                <div className='data-listTwo'>
                    {/* 上部文字 */}
                    <div className='list-text'>
                        <p>商品销售明细</p>
                        <div>
                            <button className={nowTimeTwo == 1 ? 'blue' : ''} onClick={() => changeTimeTwo(1)}>昨天</button>
                            <button className={nowTimeTwo == 2 ? 'blue' : ''} onClick={() => changeTimeTwo(2)}>最近7天</button>
                            <button className={nowTimeTwo == 3 ? 'blue' : ''} onClick={() => changeTimeTwo(3)}>最近30天</button>
                            <Space direction="vertical" size={12}>
                                <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
                            </Space>
                        </div>
                    </div>
                    {/* 数据 */}
                    <div className='table-from'>
                        <ConfigProvider locale={zh_CN}>
                            <Table
                                rowSelection={rowSelection}
                                columns={oColumns}
                                dataSource={oData}
                                onChange={onchangePage}

                                scroll={{ y: 422 }}
                                pagination={{
                                    position: ['bottomCenter'],
                                    defaultPageSize: pageSize,
                                    pageSizeOptions: [3, 5, 10, 15],
                                    showQuickJumper: true,
                                    showSizeChanger: true,
                                    total: allShop

                                }}
                                bordered
                            />
                        </ConfigProvider>
                    </div>
                </div>
                <div className='footer'></div>
            </div>
        </div>

    )
}

export default ShopStatistics